<template>
    <div class="system-config-template">
        <h4 class="header">后台系统配置信息</h4>
        <div class="content">
            <div class="title-section">系统配置相关选项值</div>
            <el-form class="config-form" ref="configForm" :model="configForm">
                <div class="info-config">
                    <p class="title">1、消息设置：</p>
                    <div class="section">
                        <el-form-item label="系统消息是否开启：">
                            <el-radio-group v-model="configForm.sysInfoStatus">
                                <el-radio label="是"></el-radio>
                                <el-radio label="否"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="收到消息是否弹出小窗口：">
                            <el-radio-group v-model="configForm.showInfoWin">
                                <el-radio label="是"></el-radio>
                                <el-radio label="否"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="预约提醒是否开启：">
                            <el-radio-group v-model="configForm.appointRemind">
                                <el-radio label="是"></el-radio>
                                <el-radio label="否"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="预约消息是否弹出小窗口：">
                            <el-radio-group v-model="configForm.showAppointWin">
                                <el-radio label="是"></el-radio>
                                <el-radio label="否"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                </div>
                <div class="file-config">
                    <p class="title">2、文件设置：</p>
                    <div class="section">
                        <el-form-item label="上传文件格式：">
                            <el-checkbox-group v-model="configForm.fileFormat">
                                <el-checkbox label="docx" name="fileFormat"></el-checkbox>
                                <el-checkbox label="txt" name="fileFormat"></el-checkbox>
                                <el-checkbox label="xls" name="fileFormat"></el-checkbox>
                                <el-checkbox label="pdf" name="fileFormat"></el-checkbox>
                                <el-checkbox label="rar" name="fileFormat"></el-checkbox>
                                <el-checkbox label="zip" name="fileFormat"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="上传文件大小不超过：">
                            <el-radio-group v-model="configForm.fileSizeMax">
                                <el-radio label="10M"></el-radio>
                                <el-radio label="5M"></el-radio>
                                <el-radio label="2M"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                </div>
                <div class="img-config">
                    <p class="title">3、图片设置：</p>
                    <div class="section">
                        <el-form-item label="图片大小：">
                            <el-radio-group v-model="configForm.imgSize">
                                <el-radio label="2M"></el-radio>
                                <el-radio label="1M"></el-radio>
                                <el-radio label="0.5M"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="图片格式：">
                            <el-checkbox-group v-model="configForm.imgFormat">
                                <el-checkbox label="bmp" name="imgFormat"></el-checkbox>
                                <el-checkbox label="png" name="imgFormat"></el-checkbox>
                                <el-checkbox label="gif" name="imgFormat"></el-checkbox>
                                <el-checkbox label="jpg" name="imgFormat"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </div>
                </div>
                <div class="database-bak-config">
                    <p class="title">4、数据库备份设置：</p>
                    <div class="section">
                        <div class="auto area">
                            <span class="title">数据库自动备份：</span>
                            <el-form-item label="每周自动备份时间：">
                                <el-time-picker type="fixed-time" placeholder="设置时间" v-model="configForm.weekBakTime"
                                                size="mini"></el-time-picker>
                            </el-form-item>
                            <el-form-item label="每日自动备份时间：">
                                <el-time-picker type="fixed-time" placeholder="设置时间" v-model="configForm.dayBakTime"
                                                size="mini"></el-time-picker>
                            </el-form-item>
                            <el-form-item label="数据库名：">
                                <span class="database-name">{{configForm.databaseName}}</span>
                                <el-button type="text">下载</el-button>
                            </el-form-item>
                        </div>
                        <div class="manual area">
                            <span class="title">数据库手动备份：</span>
                            <el-form-item label="是否现在：">
                                <el-button size="mini">备份开始</el-button>
                            </el-form-item>
                            <el-form-item label="数据库名：">
                                <span class="database-name">{{configForm.databaseName}}</span>
                                <el-button type="text">下载</el-button>
                            </el-form-item>
                        </div>
                    </div>
                </div>
                <div class="sms-config">
                    <p class="title">5、短信设置：</p>
                    <div class="section">
                        <el-form-item label="是否自动发短信：">
                            <el-radio-group v-model="configForm.autoSendSMS">
                                <el-radio label="是"></el-radio>
                                <el-radio label="否"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="是否短信群发：">
                            <el-radio-group v-model="configForm.allSendSMS">
                                <el-radio label="是"></el-radio>
                                <el-radio label="否"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="绑定手机号：" class="bind-phone">
                            <el-input v-model="configForm.phone" size="mini"></el-input>
                            <el-button @click.prevent="" size="mini">测试</el-button>
                            <el-button @click.prevent="" size="mini" type="primary">确定</el-button>
                        </el-form-item>
                    </div>
                </div>
                <div class="email-config">
                    <p class="title">6、邮件设置：</p>
                    <div class="section">
                        <el-form-item label="邮件发送方式：">
                            <el-radio-group v-model="configForm.emailSendFormat">
                                <el-radio label="使用外部SMTP发送"></el-radio>
                                <el-radio label="使用本地服务器发送"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="发信人邮箱：">
                            <el-input v-model="configForm.senderEmail" size="mini"></el-input>
                        </el-form-item>
                        <el-form-item label="SMTP服务器地址：">
                            <el-input v-model="configForm.SMTPIP" size="mini"></el-input>
                        </el-form-item>
                        <el-form-item label="SMTP服务器端口：">
                            <el-input v-model="configForm.SMTPPort" size="mini"></el-input>
                        </el-form-item>
                        <el-form-item label="SMTP用户名：">
                            <el-input v-model="configForm.SMTPUsername" size="mini"></el-input>
                        </el-form-item>
                        <el-form-item label="SMTP密码：">
                            <el-input v-model="configForm.SMTPPassword" size="mini"></el-input>
                        </el-form-item>
                        <div class="button-area">
                            <el-button size="mini">测试</el-button>
                            <el-button size="mini" type="primary">确定</el-button>
                        </div>
                    </div>
                </div>
                <div class="remind-config">
                    <p class="title">7、提醒设置：</p>
                    <div class="section">
                        <el-form-item label="1、预约提醒值：">
                            <el-select v-model="configForm.appointValue" placeholder="请选择" size="mini">
                                <el-option label="0.5" value="0.5"></el-option>
                                <el-option label="1" value="1"></el-option>
                            </el-select>
                            <span>小时</span>
                        </el-form-item>
                        <el-form-item label="2、商机提醒值：">
                            <el-select v-model="configForm.businessValue" placeholder="请选择" size="mini">
                                <el-option label="1" value="1"></el-option>
                                <el-option label="2" value="2"></el-option>
                            </el-select>
                            <span>天</span>
                        </el-form-item>
                        <el-form-item label="3、合同提醒值：">
                            <el-select v-model="configForm.contractValue" placeholder="请选择" size="mini">
                                <el-option label="7" value="7"></el-option>
                                <el-option label="14" value="14"></el-option>
                            </el-select>
                            <span>天</span>
                        </el-form-item>
                    </div>
                </div>
                <div class="submit">
                    <el-button type="primary" class="btn">确定保存</el-button>
                    <el-button class="btn">取消</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "SystemConfig",
        data() {
            return {
                configForm: {
                    sysInfoStatus: '',
                    showInfoWin: '',
                    appointRemind: '',
                    showAppointWin: '',
                    fileFormat: [],
                    fileSizeMax: '',
                    imgSize: '',
                    imgFormat: [],
                    weekBakTime: '',
                    dayBakTime: '',
                    databaseName: '201608292300.SQL',
                    autoSendSMS: '',
                    allSendSMS: '',
                    emailSendFormat: '',
                    senderEmail: '',
                    SMTPIP: '',
                    SMTPPort: '',
                    SMTPUsername: '',
                    SMTPPassword: '',
                    appointValue: 0.5,
                    businessValue: 1,
                    contractValue: 7
                }
            }
        }
    }
</script>

<style lang="scss">
    @import "src/common/common.style";
    .system-config-template {
        width: 100%;
        height: 100%;
        background-color: #fff;
        .header {
            text-align: center;
        }
        .content {
            height: calc(100% - 60px);
            .title-section {
                font-weight: 600;
                text-align: left;
                border-bottom: 1px solid #ddd;
                padding-bottom: 5px;
                margin: 0 10px;
            }
            .config-form {
                margin-top: 5px;
                @include ofy-a();
                height: calc(100% - 30px);
                .el-form-item {
                    margin-bottom: 0;
                    .el-form-item__content {
                        @include fl()
                    }
                }
                .title {
                    font-weight: 600;
                    text-align: left;
                    margin-left: 10px;
                }
                .section {
                    padding-left: 50px;
                }
                .info-config, .img-config, .sms-config {
                    .el-form-item {
                        display: inline-block;
                        width: 50%;
                    }
                }
                .file-config {

                }
                .database-bak-config {
                    text-align: left;
                    .area {
                        border: 1px solid #dddddd;
                        padding: 5px;
                        display: inline-block;
                        margin: 10px 0;
                        .database-name {
                            margin-right: 20px;
                        }
                    }
                    .auto {
                        margin-right: 50px;
                    }
                    .el-form-item {
                        margin-left: 10px;
                        .el-form-item__label {
                            padding-right: 0;
                        }
                        .el-input__inner {
                            width: 125px;
                        }
                    }
                }
                .sms-config {
                    .bind-phone {
                        display: block;
                        width: 100%;
                    }
                    .el-input {
                        width: 180px;
                        margin-right: 10px;
                    }
                }
                .email-config {
                    .button-area {
                        width: 25%;
                    }
                }
                .submit {
                    margin-bottom: 50px;
                    .btn{
                        margin: 0 50px;
                        width: 100px;
                    }
                }
            }
        }
    }
</style>